<template>
  <view class="ve-tooltip">
    <view class="ve_tooltip_content" @click.stop="handleClick">
      <slot></slot>
      <view
        class="ve_tooltip__popper"
        :style="[
          style,
          {
            visibility: isShow ? 'visible' : 'hidden',
          },
        ]"
      >
        <slot name="content">{{ content }}</slot>
        <view
          class="ve_popper__icon"
          :style="[arrowStyle]"
          :class="[
            {
              ve_popper__up: placement.indexOf('bottom') === 0,
              ve_popper__arrow: placement.indexOf('top') === 0,
              ve_popper__right: placement.indexOf('right') === 0,
              ve_popper__left: placement.indexOf('left') === 0,
            },
          ]"
        >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      placement: {
        type: String,
        default: 'top-start',
      },
      content: {
        type: String,
        default: '',
      },
      show: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        isShow: false,
        arrowLeft: 0,
        query: null,
        style: {},
        arrowStyle: {},
      }
    },
    mounted() {
      // #ifdef H5
      window.addEventListener('click', () => {
        this.isShow = false
      })
      // #endif
    },
    methods: {
      close() {
        this.isShow = false
      },
      fixedWrap() {
        this.isShow = false
      },
      handleClick() {
        if (this.isShow) {
          this.isShow = false
          uni.$off('hideToolTip')
          return
        }
        uni
          .createSelectorQuery()
          .in(this)
          .selectAll('.ve_tooltip_content,.ve_tooltip__popper')
          .boundingClientRect(async (data) => {
            let { left, bottom, right, top, width, height } = data[0]
            let obj1 = data[1]

            let objStyle = {}
            let objStyle1 = {}
            // 获取屏幕宽度
            const screenWidth = uni.getSystemInfoSync().windowWidth
            const exceedLeft = (obj1.width - width) / 2 - left
            const exceedRight = (obj1.width - width) / 2 + left
            console.log('tooltip==exceed:', exceedLeft, exceedRight, screenWidth)

            switch (this.placement) {
              case 'top':
                objStyle.left = `-${(obj1.width - width) / 2}px`
                objStyle.bottom = `${height + 8}px`
                objStyle1.left = obj1.width / 2 - 6 + 'px'
                if (exceedLeft > 0) {
                  objStyle.left = -left + 20 + 'px'
                  objStyle1.left = obj1.width / 2 - exceedLeft - 27 + 'px'
                }
                if (exceedRight > screenWidth) {
                  objStyle.right = `-${width / 2}px`
                  objStyle.left = undefined
                  objStyle.bottom = `${height + 8}px`
                  objStyle1.right = `8px`
                  objStyle1.left = undefined
                }

                break
              case 'top-start':
                objStyle.left = `-${width / 2}px`
                objStyle.bottom = `${height + 8}px`
                break

              case 'top-end':
                objStyle.right = `0px`
                objStyle.bottom = `${height + 8}px`
                objStyle1.right = `8px`
                break

              case 'bottom':
                objStyle.left = `-${(obj1.width - width) / 2}px`
                objStyle.top = `${height + 8}px`
                objStyle1.left = obj1.width / 2 - 6 + 'px'
                break

              case 'bottom-start':
                objStyle.left = `-${width / 2}px`
                objStyle.top = `${height + 8}px`
                objStyle1.left = `8px`
                break

              case 'bottom-end':
                objStyle.right = `-${width / 2}px`
                objStyle.top = `${height + 8}px`
                objStyle1.right = `8px`
                break

              case 'right':
                objStyle.left = `${width + 8}px`
                if (obj1.height > height) {
                  objStyle.top = `-${(obj1.height - height) / 2}px`
                } else {
                  objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`
                }

                objStyle1.top = `${obj1.height / 2 - 6}px`
                break
              case 'right-start':
                objStyle.left = `${width + 8}px`
                objStyle.top = `0px`
                objStyle1.top = `8px`
                break

              case 'right-end':
                objStyle.left = `${width + 8}px`
                objStyle.bottom = `0px`
                objStyle1.bottom = `8px`
                break

              case 'left':
                objStyle.right = `${width + 8}px`
                if (obj1.height > height) {
                  objStyle.top = `-${(obj1.height - height) / 2}px`
                } else {
                  objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`
                }

                objStyle1.top = `${obj1.height / 2 - 6}px`
                break

              case 'left-start':
                objStyle.right = `${width + 8}px`
                objStyle.top = `0px`
                objStyle1.top = `8px`
                break

              case 'left-end':
                objStyle.right = `${width + 8}px`
                objStyle.bottom = `0px`
                objStyle1.bottom = `8px`
                break
            }
            this.style = objStyle
            // 三角形箭头
            this.arrowStyle = objStyle1

            // 关闭其他的 toolTip
            uni.$emit('hideToolTip')
            this.isShow = true
            uni.$on('hideToolTip', () => {
              this.isShow = false
            })
          })
          .exec()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .ve-tooltip {
    position: relative;
  }
  .ve_tooltip_content {
    position: relative;
    display: flex;
  }
  .ve_tooltip__popper {
    /* transform-origin: center top; */
    background: #303133;
    visibility: hidden;
    color: #fff;
    position: absolute;
    border-radius: 4px;
    font-size: 12px;
    padding: 10px;
    min-width: 10px;
    word-wrap: break-word;
    display: inline-block;
    white-space: nowrap;
    z-index: 9;
    line-height: 1.38;
  }
  .ve_popper__icon {
    width: 0;
    height: 0;
    z-index: 9;
    position: absolute;
  }
  .ve_popper__arrow {
    bottom: -5px;
    /* transform-origin: center top; */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #303133;
  }
  .ve_popper__right {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #303133;
    left: -5px;
  }

  .ve_popper__left {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #303133;
    right: -5px;
  }

  .ve_popper__up {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #303133;
    top: -5px;
  }
  .fixed {
    position: absolute;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: auto;
    background: red;
    z-index: -1;
  }
</style>
